<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一般都会让文件选择框隐藏，因为没法给样式，不好看 -->
  <input type="file" style="display: none;" multiple>

  <button>选择文件</button>

    <script src="./axios.js"></script>
    <script>
       axios.defaults.baseURL = 'http://www.itcbc.com:3006'
       document.querySelector('button').addEventListener('click',function(){
        // 用代码的方式，点了一个文件选择框
        document.querySelector('input').click()
       })
        
       document.querySelector('input').addEventListener('change',function(){
        // console.dir(this) // this.files 是一个伪数组，表示我们选择的所有文件；this.files[0]表示选择的第1个文件
        if(this.files.length>0){
            // 因为没有 <form>....</form>，所以这里留空
            let fd = new FormData()
            // 找文件对象的 固定语法
            let fileObj = this.files[0]
            // 把文件对象加入到 fd 中
            fd.append('avatar',fileObj)
            // ajax 提交 fd
            axios.post('/api/formdata',fd).then( result =>{
                console.log(result.data);
            })
        }
       })
    </script>
</body>
</html>